<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="../../style/login/login.css">
    <link rel="short cut" href="../../favicon.ico"/>
    <!-- <link href="css/login.css" rel="stylesheet"> -->
    <script type="text/javascript" src="../../plugins/jQuery/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="../../plugins/vue/vue.js"></script>
    <script type="text/javascript" src="../../plugins/axios/axios.js"></script>
    <script type="text/javascript" src="../../plugins/layer-master/dist/layer.js"></script>
</head>

<body>
<div id="app">
    <form id="form" method="post">
        <h1 id="loginMsg" >LOGIN IN</h1>
        <label style="color: white">{{error}}</label>
        <p><label for="username">Username:</label><input id="username" v-model="username" name="username" type="text" autocomplete="off">
        </p>

        <p><label for="password">Password:</label><input id="password" v-model="password" name="password" type="password" @click="login"></p>
        <div id="subDiv">
            <input type="button" @click="login" class="loginButton" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
        </div>
    </form>
</div>

<script type="text/javascript">

    // 取消vue的开发模式
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#app",
        data: {
            username: "",
            password: "",
            error:''
        },
        methods: {
           login(){
               let params=new URLSearchParams()
               params.append('username',this.username)
               params.append('password',this.password)
               axios({
                   method:'post',
                   url:'http://localhost:8004/user/login',
                   data:params
               }).then(resp =>{
                   console.log(resp.data)
                   if (resp.data.success){
                       localStorage.setItem('front_token',resp.data.data)
                       location.href='../../index.html'
                   }else{
                       this.error='账号或者密码错误'
                   }
               })
               return false
           }
        }
    })
</script>

</body>
</html>